iT邦幫忙

2024 iThome 鐵人賽

DAY 19
0
Modern Web

React 學得動嗎系列 第 19

[Day 19] Gym Pro:健身房後台管理系統實作

  • 分享至 

  • xImage
  •  

昨天我們開始React實戰-打造健身房dashboard,今天,我們要開始實作我們的健身房後台管理系統 —— Gym Pro。我們將從建立專案開始,一步步建立起我們的應用程式骨架。

步驟 1: 建立專案

首先,我們使用 Vite 來建立我們的 React 專案。在終端機中輸入以下命令:

npm create vite@latest gym-pro -- --template react-ts
cd gym-pro

步驟 2: 安裝必要的套件

接下來,我們安裝一些關鍵的開發工具和函式庫,這些將幫助實作系統功能:

npm install react-router-dom zustand @tanstack/react-table react-hook-form axios @tanstack/react-query
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

步驟 3: 設置 Tailwind CSS

在 tailwind.config.js 文件中,設定 Tailwind CSS 的內容:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

接著,在 src/index.css 文件中加入以下 CSS 基本設定:

@tailwind base;
@tailwind components;
@tailwind utilities;

步驟 4: 建立專案結構

讓我們按照昨天討論的結構來組織我們的專案:

mkdir src/components src/pages src/layouts src/hooks src/services src/stores src/utils src/types

步驟 5: 設置基本路由

現在,我們將為系統設置一些基本的頁面路由。首先,建立頁面元件:

src/pages/Dashboard.tsx 中:

import React from 'react';

const Dashboard: React.FC = () => {
  return <h1>Dashboard</h1>;
};

export default Dashboard;

src/pages/Members.tsx 中:

import React from 'react';

const Members: React.FC = () => {
  return <h1>Members</h1>;
};

export default Members;

然後,在 src/App.tsx 中設置路由:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Members from './pages/Members';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/members" element={<Members />} />
      </Routes>
    </Router>
  );
}

export default App;

步驟 6: 建立基本布局

接下來,設置系統的主視圖框架。我們在 src/layouts/MainLayout.tsx 中設置一個主布局:

import React from 'react';
import { Link } from 'react-router-dom';

interface MainLayoutProps {
  children: React.ReactNode;
}

const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
  return (
    <div className="flex">
      <nav className="w-64 bg-gray-800 h-screen p-4">
        <h1 className="text-white text-2xl font-bold mb-4">FitTrack Pro</h1>
        <ul>
          <li><Link to="/" className="text-white">Dashboard</Link></li>
          <li><Link to="/members" className="text-white">Members</Link></li>
        </ul>
      </nav>
      <main className="flex-1 p-4">
        {children}
      </main>
    </div>
  );
};

export default MainLayout;

然後,在 src/App.tsx 中使用這個布局:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import Dashboard from './pages/Dashboard';
import Members from './pages/Members';

function App() {
  return (
    <Router>
      <MainLayout>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/members" element={<Members />} />
        </Routes>
      </MainLayout>
    </Router>
  );
}

export default App;

步驟 7: 建立 Zustand Store

最後,我們來設置一個簡單的 Zustand store,用於管理使用者的身份驗證狀態。在 src/stores/authStore.ts 中:

import create from 'zustand';

interface User {
  id: number;
  name: string;
  role: string;
}

interface AuthStore {
  user: User | null;
  setUser: (user: User | null) => void;
}

const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

export default useAuthStore;

這就是我們 Gym Pro 專案的基本設置!我們已經完成了以下工作:

  1. 建立了專案並安裝了必要的套件
  2. 設置了 Tailwind CSS
  3. 建立了基本的專案結構
  4. 設置了基本的路由
  5. 建立了一個基本的布局
  6. 建立了一個簡單的 Zustand store 用於身份驗證

接下來,我們可以開始實作更多具體的功能,如會員管理、課程排程等。我們也可以開始整合 shadcn/ui 組件來美化我們的界面。


上一篇
[Day 18] React 實戰:打造健身房後台 Dashboard
下一篇
[Day 20] Gym Pro:設計登入頁面和主導航,整合 React Query
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言